<template>
  <Modal
    v-model="modal"
    :title="type === 'edit' ? '编辑文章' : '新增文章'"
    @on-ok="handleSubmit('article_form')"
    @on-cancel="handleCancel('article_form')"
  >
    <Form ref="article_form" :model="formItem" :rules="ruleInline">
      <Row>
        <Col>
          <FormItem label="标题" prop="title" :label-width="50">
            <Input v-model="formItem.title" placeholder="请输入标题"></Input>
          </FormItem>
        </Col>
        <Col>
          <FormItem label="描述" prop="desc" :label-width="50">
              <Input v-model="formItem.desc" type="textarea" :autosize="{minRows: 5,maxRows: 8}" placeholder="请输入描述"></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </Modal>
</template>

<script>
  import request from '../../utils/request';
  import { Bus } from '../../utils/utils';
  export default {
    data() {
      return {
        modal: false,
        formItem: {
          title: '',
          desc: '',
        },
        ruleInline: {
          title: [
            {
              required: true,
              message: '请输入标题',
              trigger: 'blur'
            },
            {
              type: 'string',
              max: 30,
              message: '标题长度不得大于30位',
              trigger: 'blur'
            }
          ],
          desc: [
            {
              type: 'string',
              max: 200,
              message: '描述长度不得大于200位',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    props: ['type', 'articleId', 'currPage'],
    methods: {
      showModal() {
        this.modal = true;
        // 获取编辑时的按钮
        this.articleId && this.getEditDetail(this.articleId);
      },
      getEditDetail(id) {
        request({
          url: `/article/getDetail?articleId=${id}`
        }).then((result) => {
          const { code, detail } = result;
          if (code === 200) {
            this.formItem = detail;
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      handleSubmit(name) {
        this.$refs[name].validate(valid => {
          if (valid) {
            const { title, desc } = this.formItem;
            const params = {
              title,
              desc
            }
            let url = '/article/addArticle', method = 'POST';
            if (this.type === 'edit') {
              url = '/article/editArticle';
              method = 'PUT';
              params.articleId = this.articleId;
            }
            request({
              url,
              method,
              data: params
            }).then((result) => {
              const { code, message } = result;
              if (code === 200) {
                this.$Message.success(message);
                this.$refs[name].resetFields();
                // 通过事件总线出发事件
                this.$emit('on-update-list', 1);
              }
            }).catch((err) => {
              console.log(err);
            });
          }
        })
      },
      handleCancel(name) {
        this.$refs[name].resetFields();
      }
    },
  }
</script>
<style scoped>

</style>